<template>
    <div class="shipin">
        <div class="shi_pin_side">
            <video @canplay="bofang" ref="load_video" class="load_video" autoplay src="../lmx/shi_pin/2.mp4"></video>
            <div class="touch_side">
                <div class="touch">
                    <div class="top">
                        <div @click="go_back"><img style="width: 30px;height: 30px;" src="../lmx/image/return.png"
                                alt=""></div>
                        <div @click="collect">
                            <img v-if="like==1" style="width: 20px;height: 20px;" src="../lmx/image/shou_cang0.png"
                                alt="">
                            <img v-if="like==0" style="width: 20px;height: 20px;" src="../lmx/image/shou_cang1.png"
                                alt="">
                        </div>
                    </div>
                    <div class="buttom">
                        <div @click="playpause">
                            <img v-if="play_pause==1" style="width: 20px;height: 20px;" class="bofang"
                                src="../lmx/image/bo_fang.png" alt="">
                            <img v-if="play_pause==0" style="width: 20px;height: 20px;" class="bofang"
                                src="../lmx/image/pause.png" alt="">
                        </div>

                        <div class="pregross">
                            <div ref="my_video" @click="move($event)" class="my_video"></div>
                        </div>
                        <div>
                            <img style="width: 15px;height: 15px;" src="./image/quan_ping.png" alt="">
                        </div>

                    </div>
                </div>

            </div>
        </div>
        <div ref="content" class="content">
            <div class="main">
                <div class="information">
                    <div class="information_side">
                        <span class="introduce">墨镜墨镜墨镜墨镜墨镜墨镜墨镜墨镜</span>
                        <div class="xin_xi">
                            <span>收藏110</span>
                            <span>评论2</span>
                            <span>点赞19</span>
                        </div>
                    </div>
                </div>
                <div class="stuff_side">
                    <div class="stuff">
                        <div class="author">
                            <div @click="his" class="head_tu">
                                <img src="../lmx/image/11.jpeg" alt="">
                            </div>
                            <div class="ni_cheng">
                                <span>很差</span>
                            </div>
                            <div @click="gai" class="focus_side" :class="active?'focus_side':'focus'">
                                <img v-if="active==1" src="../lmx/image/jia.png" alt="">
                                <span v-if="active==1" ref="guanzhu">关注</span>
                                <span v-if="active==0">已关注</span>
                            </div>
                        </div>
                        <div class="need_stuff">
                            <span class="title">所需材料</span>
                            <div class="tool">
                                <div class="one_tool" v-for="item in stuff_list ">
                                    <span>{{item.stuff_name}}</span>
                                    <span>{{item.stuff_number}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="need_stuff">
                            <span class="title">所需工具</span>
                            <div class="tool">
                                <div class="one_tool">
                                    <span>11</span>
                                    <span>22</span>
                                </div>
                                <div class="one_tool">
                                    <span>11</span>
                                    <span>22</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="discuss"><span>评论</span></div>
                <div class="discuss_side" v-for="i in 2">
                    <div class="discuss_main">
                        <div class="zuo"><img src="../lmx/image/22.jpg" alt=""></div>
                        <div class="you">
                            <div  class="you_one">
                                <span class="ming_cheng">冷月如我</span>
                                <span @click="reply" class="nei_rong">欧沃尔请问是却无法切欧沃尔请问是却无法切欧沃尔请问是却无法切</span>
                                <div class="time_side">
                                    <span class="time">2022-09-30</span>
                                    <span @click="delete1()" class="del">删除</span>
                                </div>
                            </div>
                            <div class="reply">
                                <div class="reply_main">
                                    <div class="zuo"><img src="../lmx/image/22.jpg" alt=""></div>
                                    <div class="right">
                                        <span class="ming_cheng">冷月如我</span>
                                        <span class="nei_rong">欧沃尔请问是却无法切欧沃尔请问是却无法切欧沃尔请问是却无法切</span>
                                        <div class="time_side">
                                            <span class="time">2022-09-30</span>
                                            <span @click="delete1" class="del">删除</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="foot">
            <input @click="look = true" type="text" placeholder="    说点什么">
            <div @click="focus" class="like_side">
                <img v-if="show==1" src="../lmx/image/like0.png" alt="">
                <img v-if="show==0" src="../lmx/image/like1.png" alt="">
                <span>点赞</span>
            </div>
            <div class="share_side" @click="showShare = true">
                <img src="../lmx/image/share.png" alt="">
                <span>评论</span>
            </div>
            <van-share-sheet v-model:show="showShare" title="分享到" :options="options" @select="onSelect" />
            <van-overlay :show='look'>
                <div class="wrapper">
                    <div class="block">
                        <div class="fa_bu">
                            <span @click="no_reply">发布</span>
                        </div>
                        <div class="wen_ben_kuang">
                            <div id="wen_ben" class="wen_ben" contenteditable="true"></div>
                        </div>
                    </div>

                </div>
            </van-overlay>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const content = ref()
const my_video = ref()
const load_video = ref()
const active = ref(1)
const show = ref(1)
const like = ref(1)
const play_pause = ref(1)
const look = ref(false)
var flag = true;
const showShare = ref(false);
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '朋友圈', icon: 'wechat-moments' },
    { name: 'QQ', icon: 'qq' },
    { name: '复制链接', icon: 'link' },
];
const onSelect = () => {
    showShare.value = false;
};
var stuff_list = [
    {
        stuff_name: '11',
        stuff_number: '22'
    },
    {
        stuff_name: '22',
        stuff_number: '22'
    },
    {
        stuff_name: '11',
        stuff_number: ''
    },
]
onMounted(() => {
    var h = document.documentElement.clientHeight || document.body.clientHeight
    var vdaH = h - 239 + 'px'
    const boxFour = content.value
    boxFour.style.height = vdaH
})
function gai() {
    if (flag == true) {
        active.value = 0
        flag = !flag
    } else if (flag == false) {
        active.value = 1
        flag = !flag
    }
}
function focus() {
    if (flag == true) {
        show.value = 0
        flag = !flag
    } else if (flag == false) {
        show.value = 1
        flag = !flag
    }
}
function collect() {
    if (flag == true) {
        like.value = 0
        flag = !flag
    } else if (flag == false) {
        like.value = 1
        flag = !flag
    }
}
function playpause() {
    var boxQi = load_video.value
    if (flag == true) {
        play_pause.value = 0
        boxQi.play()
        flag = !flag
    } else if (flag == false) {
        play_pause.value = 1
        boxQi.pause()
        flag = !flag
    }
}
function reply() {
    look.value = true
    // console.log(look.value)
    // console.log('跳出评论框')
}
function no_reply() {
    var bbb = document.getElementById('wen_ben')
    console.log(bbb.innerText)
    look.value = false
    // console.log(look.value)
    // console.log('隐藏评论框')
}
function go_back() {
    router.go(-1)
    clearInterval(timer)
}
function move(e) {
    // console.log(e);
    let boxLiu = my_video.value
    let boxQi = load_video.value
    var bai_fen_bi = e.offsetX / boxLiu.offsetWidth * 100
    boxLiu.style.background = "linear-gradient(to right , red " + bai_fen_bi + "%, #969799 0%)"
    boxQi.currentTime = bai_fen_bi / 100 * boxQi.duration
}
let timer= setInterval(() => {
    let boxLiu = my_video.value
    let boxQi = load_video.value
    var bai_fen_bi = boxQi.currentTime / boxQi.duration * 100
    boxLiu.style.background = "linear-gradient(to right , red " + bai_fen_bi + "%,#969799 0%)"
}, 1000);
function bofang() {
    play_pause.value = 0
    flag = !flag
}
function delete1(){
    console.log('111')
}
function his(){
    // console.log('888')
    clearInterval(timer)
    router.push({
        name:'storeUp'
    })
}
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

.shipin {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.shi_pin_side {
    width: 100%;
    height: 200px;
    background-color: black;
}

.shi_pin_side>video {
    width: 100%;
    height: 100%;
}

.touch_side {
    width: 100%;
    height: 200px;
    background-color: transparent;
    position: fixed;
    top: 0px;
}

.touch {
    width: 100%;
    height: 100%;
    /* background-color: #ee0a24; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.top {
    width: 95%;
    height: 40px;
    /* background-color: aqua; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top>div {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #3232338a;
    display: flex;
    justify-content: center;
    align-items: center;
}

.buttom {
    width: 95%;
    height: 40px;
    /* background-color: blue; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.buttom>div {
    width: 40px;
    height: 40px;
    /* background-color: #ee0a24; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.pregross {
    flex: 1;

}

.my_video {
    width: 255px;
    height: 5px;
    background-color: #969799;
}

.content {
    width: 100%;
    /* flex: 1; */
    /* background-color: orange; */
    overflow: scroll;
}

.main {
    width: 100%;
    /* height: 180%; */
    display: flex;
    flex-direction: column;

}

.information {
    width: 100%;
    height: 110px;
    /* background-color: aqua; */
    border-bottom: 1px solid #dcdee0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.information_side {
    width: 60%;
    height: 72%;
    /* background-color: beige; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.introduce {
    font-size: 16px;
    margin: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    word-break: break-all;
    -webkit-box-orient: vertical;
}

.xin_xi {
    width: 80%;
    /* height: 38px; */
    /* background-color: blue; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.xin_xi>span {
    font-size: 13px;
    color: #969799;
    margin-right: 12px;
}

.stuff_side {
    width: 100%;
    /* height: 400px; */
    /* background-color: aquamarine; */
    border-bottom: 6px solid #c8c9cc;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stuff {
    width: 95%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.author {
    width: 100%;
    height: 80px;
    /* background-color: chocolate; */
    display: flex;
    justify-content: space-between;
    align-items: center
}

.head_tu {
    width: 40px;
    height: 40px;
    /* background-color: aqua; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.head_tu>img {
    width: 35px;
    height: 35px;
    border-radius: 50%;

}

.ni_cheng {
    width: 227px;
    height: 40px;
    /* background-color: #969799; */

}

.ni_cheng>span {
    font-size: 15px;
}

.focus_side {
    width: 73px;
    height: 30px;
    border-radius: 15px;
    background-color: #ee0a24;
    display: flex;
    justify-content: center;
    align-items: center;
}

.focus {
    background-color: #969799;
}

.focus_side>img {
    width: 14px;
    height: 14px;
}

.focus_side>span {
    font-size: 14px;
    margin-left: 5px;
    color: #dcdee0;
}

.need_stuff {
    width: 100%;
    /* height: 130px; */
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
}

.title {
    font-size: 16px;
    font-weight: 550;
}

.tool {
    width: 100%;
    /* height: 90px; */
    /* background-color: blueviolet; */
    display: flex;
    flex-direction: column;
}

.one_tool {
    width: 100%;
    height: 30px;
    border-top: 1px dashed #969799;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.one_tool>span {
    font-size: 18px;
}

.discuss {
    width: 100%;
    height: 40px;
    /* background-color: aqua; */
    display: flex;
    /* justify-content: center; */
    align-items: center;
}

.discuss>span {
    font-size: 18px;
    font-weight: 550;
    margin-left: 10px;
}

.discuss_side {
    width: 100%;
    /* height: 120px; */
    margin-top: 5px;
    border-bottom: 1px solid #969799;
    /* background-color: #ee0a24; */
    display: flex;
    justify-content: center;
    align-items: center;

}

.discuss_main {
    width: 96%;
    height: 100%;
    /* background-color: bisque; */
    display: flex;
    justify-content: space-between;
}

.zuo {
    width: 40px;
    /* height: 100%; */
    /* background-color: blue; */
    display: flex;
    justify-content: center;
}

.zuo>img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.you {
    width: 313px;
    /* background-color: blueviolet; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.you>.you_one {
    width: 100%;
    /* height: 100%; */
    /* background-color: cadetblue; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.right {
    flex: 1;
    /* background-color: blueviolet; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ming_cheng {
    font-size: 13px;
    color: #969799;
}

.nei_rong {
    margin-top: 10px;
    margin-bottom: 8px;
    font-size: 14px;
}

.time_side {
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: space-between;
}

.time,
.del {
    font-size: 10px;
    color: #969799;
}

.reply {
    width: 100%;
    /* height: 120px; */
    border-top: 1px solid #969799;
    /* background-color: #ee0a24; */
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reply_main {
    width: 96%;
    /* height: 79%; */
    margin-top: 5px;
    margin-bottom: 5px;
    /* background-color: bisque; */
    display: flex;
    justify-content: space-between;
}

.foot {
    width: 100%;
    height: 40px;
    border-top: 1px solid #dcdee0;
    /* background-color: blue; */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

input {
    width: 230px;
    height: 30px;
    border-radius: 26px;
    background-color: #dcdee0;
    outline: hidden;
    border: transparent;
}

.like_side {
    width: 50px;
    height: 30px;
    /* background-color: aqua; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.like_side>img {
    width: 20px;
    height: 20px;
}

.like_side>span {
    font-size: 10px;
    color: #969799;
}

.share_side {
    width: 50px;
    height: 30px;
    /* background-color: red; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.share_side>img {
    width: 20px;
    height: 20px;
}

.share_side>span {
    font-size: 10px;
    color: #969799;
}

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.block {
    width: 100%;
    /* height: 220px; */
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fa_bu {
    width: 95%;
    height: 40px;
    border-bottom: 1px solid #999;
    margin-bottom: 10px;
    /* background-color: #ee0a24; */
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.wen_ben_kuang{
    width: 95%;
    /* height: 130px; */
    margin-bottom: 50px;
    /* background-color: aqua; */
}

.wen_ben {
    margin: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 15px;
    line-height: 22px;
    border: solid 1px #999;
}

[contenteditable] {
    outline: 0 solid transparent;
}
</style>